<template>
  <div class="block">

    <el-row>

      <el-col :span="12">
        <el-card class="box-card" shadow="always" v-infinite-scroll="load" style="overflow:auto">
          <div class="block">
            <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                     :props="{ label: 'name', children: 'pdCoreOrgVoList' }">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <span>
                                    <el-button type="text" size="mini" @click="() => append(data)"
                                               v-if="data.orgType !==4">
                                        添加
                                    </el-button>
                                    <el-button type="text" size="mini" @click="() => update(node, data)">
                                        修改
                                    </el-button>
                                </span>
                            </span>
            </el-tree>
          </div>

        </el-card>
      </el-col>


      <el-col :span="11">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <span>{{ headerName }}</span>
          </div>
          <el-form ref="form" :model="AddCoreOrgForm" label-width="80px" size="medium">
            <el-form-item label="上级名称" v-if="!flag">
              <el-input v-model="AddCoreOrgForm.pname" disabled></el-input>
            </el-form-item>
            <el-form-item label="组织名称">
              <el-input v-model="AddCoreOrgForm.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <div class="block">
                <el-cascader :key="resetCascader" filterable :options="options" @change="handleChange"
                             :value="addressId" style="width: 100%;"
                             :props="{ label: 'name', value: 'id', children: 'pdAreaVOS' }">
                </el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="AddCoreOrgForm.address"></el-input>
            </el-form-item>


            <el-form-item label="级别">
              <el-select v-model="AddCoreOrgForm.orgType" style="width: 100%;">
                <el-option
                  v-for="item in rankList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="联系电话">
              <el-input v-model="AddCoreOrgForm.contractNumber"></el-input>
            </el-form-item>

            <el-form-item label="简称">
              <el-input v-model="AddCoreOrgForm.abbreviation"></el-input>
            </el-form-item>

            <el-form-item label="描述">
              <el-input v-model="AddCoreOrgForm.describe"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button v-if="!flag" type="primary" @click="AddCoreOrg">立即创建</el-button>
              <el-button v-if="flag" type="primary" @click="updateCoreOrg">立即修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';


const AK = "uAr4Z9shY1P3Ms9FIYqqAB8FlwRdiVKw";
export default {

  data() {

    return {
      options: [],//地址数据
      data: [],//树状图数据
      headerName: "新增",//头部名称
      AddCoreOrgForm: {},//添加数据
      addressName: "",//区域地址
      addressId: [],//区域id
      resetCascader: 0, //级联的key值
      flag: false,
      count: 0,
      rankList: [
        {
          value: 1,
          label: '分公司'
        },
        {
          value: 2,
          label: '一级转运中心'
        },
        {
          value: 3,
          label: '二级转运中心'
        },
        {
          value: 4,
          label: '网点'
        }
      ],//公司级别

    }
  },
  created() {
    this.queryArea();
    this.queryCoreOrgList();
  },
  methods: {
    load() {
      this.count += 2
    },
    //修改组织
    async updateCoreOrg() {

      let newUrl = this.addressName + this.AddCoreOrgForm.address;
      this.AddCoreOrgForm.provinceId = this.addressId[0];
      this.AddCoreOrgForm.cityId = this.addressId[1];
      this.AddCoreOrgForm.countyId = this.addressId[2];


      await this.$jsonp('https://api.map.baidu.com/geocoding/v3/', {
        address: newUrl,
        output: 'json',
        ak: AK
      }).then(json => {
        // 得到我们想要的内容
        this.AddCoreOrgForm.latitude = json.result.location.lat;
        this.AddCoreOrgForm.longitude = json.result.location.lng;

      }).catch(err => {
        console.log(err)
      });
      let result = await axios.post("/api/pd-aggregationcjj/pd-core-org/updateCoreOrg", this.AddCoreOrgForm);
      if (result.data.code == "200") {
        this.$message("/修改成功");
        this.AddCoreOrgForm = {};
        this.clearOption();
        this.addressName = '';
        this.queryCoreOrgList();

      }


    },

    //清空级联
    clearOption() {
      this.addressId = [];   //v-model绑定值清空
    },

    //添加组织
    async AddCoreOrg() {
      if (this.AddCoreOrgForm.pname != null) {
        let newUrl = this.addressName + this.AddCoreOrgForm.address;
        this.AddCoreOrgForm.provinceId = this.addressId[0];
        this.AddCoreOrgForm.cityId = this.addressId[1];
        this.AddCoreOrgForm.countyId = this.addressId[2];
        await this.$jsonp('https://api.map.baidu.com/geocoding/v3/', {
          address: newUrl,
          output: 'json',
          ak: AK
        }).then(json => {
          // 得到我们想要的内容
          this.AddCoreOrgForm.latitude = json.result.location.lat;
          this.AddCoreOrgForm.longitude = json.result.location.lng;
        }).catch(err => {
          console.log(err)
        });

        let result = await axios.post("/api/pd-aggregationcjj/pd-core-org/AddCoreOrg", this.AddCoreOrgForm);
        if (result.data.code == "200") {
          this.$message("添加成功");
          this.AddCoreOrgForm = {}
          this.clearOption()
          this.queryCoreOrgList()
        }
      } else {
        this.$message.error("请先选中公司");
      }

    },
    //查询机构
    async queryCoreOrgList() {
      let result = await axios.get("/api/pd-aggregationcjj/pd-core-org/queryCoreOrgList");
      this.data = result.data.data;
    },
    // 查询地址
    async queryArea() {
      let result = await axios.post("/api/pd-aggregationcjj/pd-area/queryArea");
      this.options = result.data.data
    },
    // 选中地址
    handleChange(value) {
      this.addressId = value;
      let sheng = this.options.filter(item => item.id == value[0]);
      let shi = sheng[0].pdAreaVOS.filter(item => item.id == value[1]);
      let qu = shi[0].pdAreaVOS.filter(item => item.id == value[2]);
      this.addressName = sheng[0].name + shi[0].name + qu[0].name;
    },
    // 添加列表
    append(data) {
      this.headerName = "新增"
      this.AddCoreOrgForm = {}
      this.AddCoreOrgForm.pname = data.name;
      this.AddCoreOrgForm.parentId = data.id;
      this.flag = false;
      this.clearOption();
    },
    // 展示修改列表
    update(node, data) {
      this.resetCascader++
      //下标0为一级菜单value
      this.addressId[0] = data.provinceId;
      //下标1为二级菜单value
      this.addressId[1] = data.cityId;
      this.addressId[2] = data.countyId;
      this.headerName = "修改"
      this.flag = true;
      this.AddCoreOrgForm = JSON.parse(JSON.stringify(data));

    },
    // 添加列表事件
    renderContent(h, {node, data, store}) {
      return (
        <span class="custom-tree-node">
                    <span>{node.label}</span>
                    <span>
                        <el-button size="mini" type="text" on-click={() => this.append(data)}>添加</el-button>
                        <el-button size="mini" type="text" on-click={() => this.update(node, data)}>删除</el-button>
                    </span>
                </span>);
    },
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}


.clearfix:after {
  clear: both
}

.box-card {
  width: 580px;
  height: 600px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
